import React from 'react'
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { getbuslist, getsplist, getBus } from '../../redux/actionCreator'

const list = (item, index, props) => {
    return (
        <li
            onClick={() => {
                props.history.push({
                    pathname: '/detail',
                    // search: `commodity_id=${item.commodity_id}`
                })
                // 将商品信息保存在本地方便存取 
                localStorage.setItem('commoditydetail', JSON.stringify(item))
                // 将此商品所对应的商家信息存储在本地方便跳转之后输出信息
                props.business.map((item2) => {
                    if (item2.business_id == item.business_id) {
                        localStorage.setItem('busdetail', JSON.stringify(item2))
                    }
                })
            }}
            key={index} className='hot-li'
            style={{ borderRadius: '20px', backgroundColor: '#D47666' }}>

            <img className="hot-img" src={`http://www.h5weixin.club:1025/api/image/${item.commodity_pic}`}></img>

            <span className="hot-word">
                <div className="hot-word-title">{((getBus(props)).filter((item2) => item2.business_id === item.business_id))[0].business_name}·{item.commodity_title}</div>
                <div className="hot-word-msg">
                    <div>
                        <i className="iconfont icon-yuyue"></i>
                        <span>{item.commodity_time}</span>
                    </div>
                    <div>
                        <i className="iconfont icon-didian"></i>
                        <span>{((getBus(props)).filter((item2) => item2.business_id === item.business_id))[0].business_address}·{item.commodity_title}</span>
                        {/* <span>{((this.props.business).filter((item2) => item2.business_id === item.business_id))[0].business_name}</span> */}
                    </div>
                    <div>
                        <i className="iconfont icon-jinqian"></i>
                        <span>{item.commodity_money}</span>
                    </div>
                    <div>
                        <span>
                            <i className="iconfont icon-yuyue1"></i>
                            {item.commodity_appoint}
                        </span>
                        <span style={{ marginLeft: '10px' }}>
                            <i className="iconfont icon-xin1"></i>
                            {item.commodity_collect}
                        </span>
                    </div>


                </div>
            </span>
        </li>
    )
}

class ShowList extends React.Component {
    constructor(props) {
        super(props)
        this.props.dispatch(getsplist());
        this.props.dispatch(getbuslist());
    }

    render() {
        let min = this.props.money.split('-')[0];
        let max = this.props.money.split('-')[1];

        if (this.props.kind === "所有" && this.props.money === "所有") {
            return this.props.shop.map((item, index) => {
                return (
                    <ul key={index}>
                        {list(item, index, this.props)}
                    </ul>
                )
            })
        }
        else if (this.props.kind !== "所有" && this.props.money === "所有") {
            return this.props.shop.map((item, index) => {
                if (this.props.kind === item.commodity_title) {
                    return (
                        <ul key={index}>
                            {list(item, index, this.props)}
                        </ul>
                    )
                }
            })
        }
        else if (this.props.kind === "所有" && this.props.money !== "所有") {
            return this.props.shop.map((item, index) => {
                if (item.commodity_money >= min && item.commodity_money < max) {
                    return (
                        <ul key={index}>
                            {list(item, index, this.props)}
                        </ul>
                    )
                }
            })
        }
        else if (this.props.kind !== "所有" && this.props.money !== "所有") {
            return this.props.shop.map((item, index) => {
                if (this.props.kind === item.commodity_title && item.commodity_money >= min && item.commodity_money < max) {
                    return (
                        <ul key={index}>
                            {list(item, index, this.props)}
                        </ul>
                    )
                }
            })
        }
        else {
            return (
                <div>不好意思，找不到信息了呢~</div>
            )
        }
    }
}
const mapStateToProps = (state) => ({
    shop: state.shop,
    business: state.business
})

export default withRouter(connect(mapStateToProps)(ShowList))